<template>
  <div class="area-industry-selecter-wrapper">
    <el-select v-model="selectType" class="w-[100px]">
      <el-option v-for="item in typeOpts" :key="item.value" :label="item.label" :value="item.value">
      </el-option>
    </el-select>
    <el-select
      v-if="selectType === 'area'"
      v-model="area"
      filterable
      placeholder="请选择区域，可搜索"
    >
      <el-option v-for="item in areaOpts" :key="item.value" :label="item.label" :value="item.value">
      </el-option>
    </el-select>

    <div v-else>
      <el-cascader
        id="industry"
        ref="industry"
        v-model="industry"
        class="w-full"
        clearable
        filterable
        placeholder="请选择产业，可搜索"
        :options="industryTree"
        :props="{
          checkStrictly: true,
          multiple: false,
          value: 'code',
          label: 'name',
        }"
        @change="handleIndustryChange"
      ></el-cascader>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { mapGetters } from 'vuex'
import { ActionsType as TreeActionsType } from '@/actions/tree'
import { MutationsType as MapMutations } from '@/actions/industryMap'
export default Vue.extend({
  components: {},
  data() {
    return {
      selectType: 'area',
      area: '',
      industry: '',
      industryLabel: '',
      typeOpts: [
        {
          value: 'area',
          label: '按区域',
        },
        {
          value: 'industry',
          label: '按产业',
        },
      ],

      areaOpts: [
        { label: '渝北区', value: '渝北区' },
        { label: '铜梁区', value: '铜梁区' },
        { label: '永川区', value: '永川区' },
        { label: '巫溪县', value: '巫溪县' },
        { label: '巫山县', value: '巫山县' },
        { label: '奉节县', value: '奉节县' },

        { label: '梁平县', value: '梁平县' },
        { label: '璧山县', value: '璧山县' },
        { label: '荣昌县', value: '荣昌县' },
        { label: '城口县', value: '城口县' },
        { label: '垫江县', value: '垫江县' },
        { label: '丰都县', value: '丰都县' },
        { label: '云阳县', value: '云阳县' },
        { label: '开县', value: '开县' },
        { label: '忠县', value: '忠县' },
        { label: '武隆县', value: '武隆县' },
        { label: '潼南县', value: '潼南县' },
        { label: '合川区', value: '合川区' },
        { label: '江津区', value: '江津区' },
        { label: '长寿区', value: '长寿区' },
        { label: '南川区', value: '南川区' },
        { label: '九龙坡区', value: '九龙坡区' },
        { label: '沙坪坝区', value: '沙坪坝区' },
        { label: '江北区', value: '江北区' },
        { label: '大渡口区', value: '大渡口区' },
        { label: '北碚区', value: '北碚区' },
        { label: '南岸区', value: '南岸区' },
        { label: '綦江区', value: '綦江区' },
        { label: '黔江区', value: '黔江区' },
        { label: '巴南区', value: '巴南区' },
        { label: '大足区', value: '大足区' },
        { label: '渝中区', value: '渝中区' },
        { label: '涪陵区', value: '涪陵区' },
        { label: '万州区', value: '万州区' },
        { label: '酉阳', value: '酉阳' },
        { label: '秀山', value: '秀山' },
        { label: '石柱', value: '石柱' },
        { label: '彭水', value: '彭水' },
      ],
    }
  },

  computed: {
    ...mapGetters('tree', {
      industryTree: 'industryTag',
    }),
    ...mapGetters('industryMap', ['areaCode', 'areaName']),
  },
  watch: {
    areaName(name) {
      this.area = name
    },
    area(val) {
      if (val) {
        console.log(val)

        this.$store.commit(MapMutations.SET_AREA, { name: val, code: val })
      }
    },
  },
  created() {
    this.$store.dispatch(TreeActionsType.getIndustryTag)
  },
  methods: {
    handleIndustryChange() {
      const nodes = this.$refs.industry.getCheckedNodes()
      console.log(nodes)
      // @ts-ignore
      this.industryLabel = nodes.map((n) => n?.label)
    },
  },
})
</script>
<style lang="scss" scoped>
.area-industry-selecter-wrapper {
  position: absolute;
  top: 10px;
  left: 10px;

  display: flex;
}
</style>
